<template>
  <div>
    <slot />
    <div style="text-align: right">
      <el-pagination
        :small="true"
        v-model:current-page="pageNo"
        :page-sizes="pagePerNums"
        :page-size="pagePerNum"
        :layout="layout"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelectPagination',
  props: {
    pageTotal: {
      required: true,
      type: Number,
      default: 0
    },
    layout: {
      type: String,
      default: 'total, prev, pager, next'
    },
    title: {
      type: Array,
      default: () => ([])
    },
    pagePerNums: {
      type: Array,
      default: () => ([10])
    },
    pagePerNum: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      pageNo: 1
    }
  },
  watch: {
    currentPage: {
      immediate: true,
      handler(val) {
        this.pageNo = val
      }
    }
  },
  methods: {
    // 当前页初始化
    initPageNum() {
      this.pageNo = 1
    },
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

<style scoped>

</style>
